<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :searchImg="false" :OriginalFilter="{ static: true }" :formList="formList2" @findClicked="findClicked2" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <div class="flex">
          <h1 class="f16">订单船务作业</h1>
          <el-button
            v-if="!currentTableRow.cfmFlag"
            style="background-color: #23c6c8"
            :icon="Plus"
            class="primaryBth ml20 add"
            type="primary"
            @click="addOne"
            >编辑数据</el-button
          >
          <JDialog
            v-if="!currentTableRow.cfmFlag"
            :width="73"
            :tableHeader="JDialogTableHeader"
            @removeOne="removeOne"
            :currentTableRow="currentTableRow"
            :unEdit="true"
            :unClearAdd="true"
            :unAdd="true"
          />
        </div>
        <Table
          @sortChange="sortChange"
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @selectList="selectTableList"
          @checkboxChange="checkboxChange"
          :summaryData="summaryData"
          summary
          @currentRow="currentRow"
          @download="download"
          @currentRow1="dbCurrentRow"
          :outTableHeight="90"
        />
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>

    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex AIC" style="flex-direction: column">
        <div class="flex mt10 JCC" style="width: 100%; background-color: white">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
            <div class="flex">
              <h1 class="f16">出货明细查询</h1>
            </div>
            <Table
              :tableHeader="tableHeader10"
              :tableData="tableData10"
              class="mt10"
              :isLoading="isLoading10"
              :outTableHeight="150"
              @confirmChange="confirmChange10"
              @currentRow="currentRow10"
            />
            <el-card shadow="never" :body-style="{ padding: '5px' }">
              <PageModule :PageData="{ total: total10, buttonS: true }" @pageSizeChange="handleSizeChange10" @pageChange="handleCurrentChange10" />
            </el-card>
          </el-card>
        </div>
      </div>
    </el-drawer>

    <el-dialog v-model="dialogVisible" title="附件" width="800">
      <el-button type="primary" size="default" @click="upload">上传文件</el-button>
      <Table
        :tableHeader="tableHeader11"
        :tableData="tableData11"
        class="mt10"
        :isLoading="isLoading11"
        @download="download11"
        :outTableHeight="150"
      />
    </el-dialog>

    <el-drawer v-model="drawer2" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer2 = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <Find :OriginalFilter="{ static: true }" :formList="formList12" @findClicked="findClicked12" />
      <div class="flex mt10" style="width: 100%; background-color: white">
        <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
          <div class="flex">
            <h1 class="f16">其他费用</h1>
            <AddOne :tableHeader="tableHeader12" :tableData="tableData12" @Save="Save" />
            <el-button class="primaryBth ml20 add" type="primary" @click="remove" style="background-color: red !important">打勾记录删除</el-button>
            <el-date-picker class="ml20" v-model="month" :type="'month'" :placeholder="'核销月份'" :format="'YYYY/MM'" :value-format="'YYYYMM'" />
            <el-button class="primaryBth ml20 add" type="primary" @click="insetMonth">打勾填充月份</el-button>
          </div>
          <JTable
            :tableHeader="tableHeader12"
            :tableData="tableData12"
            class="mt10"
            :isLoading="isLoading12"
            selection
            @selectList="selectTableList12"
            summary
            :summaryData="summaryData12"
            @currentRow="currentRow12"
            @checkboxChange="checkboxChange12"
            @confirmChange="confirmChange12"
          />
          <PageModule :PageData="{ total: total12, buttonS: true }" @pageSizeChange="handleSizeChange12" @pageChange="handleCurrentChange12" />
        </el-card>
      </div>
    </el-drawer>
    <!-- <el-dialog v-model="dialogVisible2" title="添加数据" width="800">
      <el-button type="primary" size="default" @click="addOne">添加</el-button>
      <el-button type="primary" size="default" @click="save">保存</el-button>
      <el-button type="primary" size="default" @click="remove">删除</el-button>
      <Table :tableHeader="tableHeader13" :tableData="tableData13" class="mt10" @download="download11" />
    </el-dialog> -->
    <el-drawer v-model="drawer3" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer3 = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex mt10" style="width: 100%; background-color: white">
        <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
          <div class="flex">
            <h1 class="f16">其他应收</h1>
          </div>
          <AddOne :tableHeader="tableHeader13" :tableData="tableData13" @AddHandle="AddHandle13" @Save="Save13" />
          <JTable :tableHeader="tableHeader13" :tableData="tableData13" class="mt10" selection />
        </el-card>
      </div>
    </el-drawer>

    <el-drawer v-model="drawer4" :direction="'ttb'" size="small" :with-header="false">
      <div class="flex mt10" style="width: 100%; background-color: white">
        <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
          <div style="display: flex; justify-content: end">
            <el-button class="primaryBth ml20 add" type="primary" @click="addOne2">添加数据</el-button>
            <el-button style="background-color: red" class="primaryBth ml20 add" type="primary" @click="removeOne2">删除当前行</el-button>
            <el-button style="background-color: #532031" class="primaryBth ml20 add" type="primary" @click="confirmAdd">保存</el-button>
          </div>
          <div class="flex">
            <JTable :tableHeader="tableHeader14" :tableData="tableData14" class="mt10" :outTableHeight="150" />
            <JTable
              style="flex: 1"
              :tableHeader="tableHeader15"
              :tableData="tableData15"
              class="mt10"
              :outTableHeight="150"
              @currentRow="currentRow15"
            />
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { Delete, Edit, Search, Share, Upload, Plus, HotWater } from '@element-plus/icons-vue'
import { defineComponent } from 'vue'
import formDataReq from '@/utils/formDataReq'
import LoginWork from '@/utils/LoginWork'
import { formateData } from '@/plugins/mixinJ'
import { selectList, selectSomeList } from '@/plugins/mixin'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'Shipping'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
const drawer3 = ref(false)
const currentDate = ref(new Date())
const formatCurrentDate = (date?: any) => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  let newMonth = month > 10 ? month : '0' + month
  let newDay = day > 10 ? day : '0' + day
  return `${year}-${newMonth}-${newDay}`
}
const dialogVisible = ref(false)

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工厂',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '工厂指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '出货日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '客人发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '报关发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '起运港-目的港',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出口类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'dateSingle',
    dateLabel: '船期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '信用证号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'dateSingle',
    dateLabel: '交单日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '状态',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入品牌',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入季度',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '搜索'
  }
]) as any

const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '信用证号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'dateSingle',
    dateLabel: '交单日期',
    dateValue: ''
  },
  {
    type: 'dateSingle',
    dateLabel: '船期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '打勾填充'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'button',
    checkboxLabel: '其他应收'
  }
]) as any

// 表一模块
const tableHeader = ref([
  {
    change: true,
    type: 'function',
    width: '180',
    label: '操作',
    prop: [
      { label: '附件', bgColor: '#1C84C6' },
      { label: '其他费用', bgColor: '#AB4366' }
    ]
  },
  {
    change: true,
    prop: 'custom',
    label: '品牌'
  },
  {
    change: true,
    prop: 'season',
    label: '季节'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'orderType',
    label: '类型'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'invoiceNo',
    label: '发票号'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'outDate',
    label: '出厂日期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'currency',
    label: '币种'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'outPair',
    label: '出货数量'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'premium',
    label: '添加港口单价'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'outAmt',
    label: '出货金额'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'additionalCost',
    label: '附加费用'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'customsInvNo',
    label: '报关发票号'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'custInvNo',
    label: '客人发票号'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'destPort',
    label: '起运港-目的港'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'exportType',
    label: '出口类型'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'shipDate',
    label: '船期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'payDays',
    label: '账期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'arDate',
    label: '应收款日期'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'arType',
    label: '收款类型'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'arAmt',
    label: '收款金额'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'remark',
    label: '备注'
  },
  {
    sortable: 'custom',
    change: true,
    width: '120',
    prop: 'creditNo',
    label: '信用证号'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'deliveryDate',
    label: '交单日期'
  },
  {
    disable: false,
    type: 'checkbox',
    prop: 'cfmFlag',
    label: '检核'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'sysUser',
    label: '建档人员'
  },
  {
    sortable: 'custom',
    change: true,
    prop: 'sysDate',
    label: '建档日期'
  }
])
// 表一按钮
const findClicked = (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '搜索') {
    getTableList()
  }
}
const findClicked2 = async (content: string) => {
  if (content === '打勾填充') {
    if (selectedLists.value.length === 0) {
      JMessage.warning('请勾选数据')
      return
    }
    if ((formList2.value[0].inputValue === '' || formList2.value[1].dateValue === '') && formList2.value[2].dateValue === '') {
      JMessage.warning('请填写数据')
      return
    }
    let res = (await LoginWork.post<any, any>(
      `/board/update/creditNo?creditNo=${formList2.value[0].inputValue}&deliveryDate=${formList2.value[1].dateValue}&shipDate=${formList2.value[2].dateValue}`,
      selectedLists.value
    )) as any
    if (res.code === 200) {
      JMessage.success('打勾填充成功')
      formList2.value[0].inputValue = ''
      formList2.value[1].dateValue = ''
      formList2.value[2].dateValue = ''
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '导出') {
    const res = (await fileRequest.post(`/board/downloadBoard`, {
      startDate:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
          .dateValue?.[0] || '',
      endDate:
        formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
          ?.dateValue?.[1] || '',
      invoiceNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '发票号'
      )?.inputValue,
      custom: formList.value
        .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')
        ?.selectValue.split(' ')[0],
      factoryLotNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂指令'
      )?.inputValue,
      orderType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '类型')
        ?.selectValue,
      custInvNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
      )?.inputValue,
      customsInvNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '报关发票号'
      )?.inputValue,
      destPort: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '起运港-目的港'
      )?.inputValue,
      exportType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '出口类型')
        ?.selectValue,
      shipDate: formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '船期')
        ?.dateValue,
      creditNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '信用证号'
      )?.inputValue,
      deliveryDate: formList.value.find(
        (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交单日期'
      )?.dateValue,
      cfmFlag: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '状态')
        ?.selectValue,
      brand: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入品牌'
      )?.inputValue,
      season: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入季度'
      )?.inputValue,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8''`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  if (content === '其他应收') {
    drawer3.value = true
  }
}
const tableData = ref([]) as any
const imgList = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 8,
    num: 0
  },
  {
    index: 10,
    num: 0
  },
  {
    index: 11,
    num: 0
  },
  {
    index: 21,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
const order = ref('')
const prop = ref('')
const sortChange = (sort: any, prop2: any, column: any) => {
  switch (column.label) {
    case '类型':
      prop.value = '1'
      break
    case '发票号':
      prop.value = '2'
      break
    case '出厂日期':
      prop.value = '3'
      break
    case '币种':
      prop.value = '4'
      break
    case '出货数量':
      prop.value = '5'
      break
    case '添加港口单价':
      prop.value = '6'
      break
    case '出货金额':
      prop.value = '7'
      break
    case '附加费用':
      prop.value = '8'
      break
    case '报关发票号':
      prop.value = '9'
      break
    case '客人发票号':
      prop.value = '10'
      break
    case '起运港-目的港':
      prop.value = '11'
      break
    case '出口类型':
      prop.value = '12'
      break
    case '船期':
      prop.value = '13'
      break
    case '账期':
      prop.value = '14'
      break
    case '应收款日期':
      prop.value = '15'
      break
    case '收款类型':
      prop.value = '16'
      break
    case '备注':
      prop.value = '17'
      break
    case '信用证号':
      prop.value = '18'
      break
    case '交单日期':
      prop.value = '19'
      break
    case '建档人':
      prop.value = '20'
      break
    case '建档日期':
      prop.value = '21'
      break
    case '收款金额':
      prop.value = '22'
      break
    default:
      order.value = ''
  }
  if (sort === 'ascending') {
    order.value = '1'
  } else if (sort === 'descending') {
    order.value = '2'
  } else {
    order.value = ''
  }
  getTableList()
}
const showJDialog = ref(false)
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await LoginWork.post<any, any>('/board/queryBoard', {
    startDate:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
        .dateValue?.[0] || '',
    endDate:
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
        ?.dateValue?.[1] || '',
    invoiceNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '发票号'
    )?.inputValue,
    custom: formList.value
      .find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')
      ?.selectValue.split(' ')[0],
    factoryLotNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂指令'
    )?.inputValue,
    orderType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '类型')
      ?.selectValue,
    custInvNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
    )?.inputValue,
    customsInvNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '报关发票号'
    )?.inputValue,
    destPort: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '起运港-目的港'
    )?.inputValue,
    exportType: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '出口类型')
      ?.selectValue,
    shipDate: formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '船期')
      ?.dateValue,
    creditNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '信用证号'
    )?.inputValue,
    deliveryDate: formList.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交单日期'
    )?.dateValue,
    cfmFlag: formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '状态')
      ?.selectValue,
    brand: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入品牌'
    )?.inputValue,
    season: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入季度'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    order: order.value,
    orderBy: prop.value
  })
  isLoading.value = false
  tableData.value = tableDataList.data.list.map((item: any) => {
    if (item.cfmFlag === 'Y') {
      item.cfmFlag = true
    } else {
      item.cfmFlag = false
    }
    item.change = 'Y'
    return item
  })
  total.value = tableDataList.data.total
  summaryData.value[0].num = tableDataList.data.summaryRoot.outPair
  summaryData.value[1].num = tableDataList.data.summaryRoot.outAmt
  summaryData.value[2].num = tableDataList.data.summaryRoot.additionalCost
  summaryData.value[3].num = tableDataList.data.summaryRoot.arAmt
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  row.cfmFlag === false ? (showJDialog.value = true) : (showJDialog.value = false)
}
const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}

// 双击当前行
const isLoading10 = ref(false)
// 分页器
const currentPage10 = ref(1)
const pageSize10 = ref(40)
const total10 = ref(0)
const handleSizeChange10 = (val: number) => {
  pageSize10.value = val
  getTableList10()
}
const handleCurrentChange10 = (val: number) => {
  currentPage10.value = val
  getTableList10()
}
const dbCurrentRowTable10 = ref({})
const dbCurrentRow = async (row: any) => {
  dbCurrentRowTable10.value = row
  drawer.value = true
  getTableList10()
}
const getTableList10 = async () => {
  // 获取抽屉数据
  // let formData = new FormData
  // for (const key in row) {
  //     formData.append(key, row[key])
  // }
  // formData.append('pageNum', String(currentPage10.value))
  // formData.append('pageSize', String(pageSize10.value))
  isLoading10.value = true
  let tableDataList = await LoginWork.post<any, any>('/board/queryBoardDetail', {
    ...dbCurrentRowTable10.value,
    pageNum: currentPage10.value,
    pageSize: pageSize10.value
  })
  tableData10.value = tableDataList.data.list.map((item: any) => {
    return item
  })
  total10.value = tableDataList.data.total
  isLoading10.value = false
}
// 修改出货明细加价
const confirmChange10 = async (row: any) => {
  const res = (await LoginWork.post<any, any>('/board/editBoardDetail', row)) as any
  if (res.code === 200) {
    JMessage.success('修改成功')
  } else {
    JMessage.error(res.message)
  }
  getTableList10()
}

const formList10 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入序号',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '插入'
  }
])
const drawer = ref(false)
const findClicked10 = async (content: string) => {}
const tableHeader10 = ref([
  {
    label: '客人PI',
    prop: 'customPiNo'
  },
  {
    label: '工厂',
    prop: 'factory'
  },
  {
    label: '工厂指令',
    prop: 'factoryLotNo'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    width: '120',
    label: '柜号',
    prop: 'containerNo'
  },
  {
    label: '出货数量',
    prop: 'outQty'
  },
  {
    label: '单价',
    prop: 'custPrice'
  },
  {
    width: '160',
    type: 'number',
    label: '加价',
    prop: 'addPrice'
  },
  {
    label: '币种',
    prop: 'factoryCur'
  },
  {
    label: '金额',
    prop: 'amount'
  },
  {
    label: '型体',
    prop: 'styleNo'
  },
  {
    label: '颜色',
    prop: 'colorName'
  },
  {
    label: '颜色代号',
    prop: 'colorCode'
  },
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '鞋名',
    prop: 'styleName'
  },
  {
    label: '客户型体',
    prop: 'custStyle'
  },
  {
    label: '季度',
    prop: 'season'
  },
  {
    label: '交期',
    prop: 'deliveryDate'
  }
])
const tableData10 = ref([]) as any
const selectedLists10 = ref([])
const selectTableList10 = (selectedList: any) => {
  selectedLists10.value = selectedList
}
const currentTable10Row = ref({}) as any
const currentRow10 = async (row: any = tableData10.value[0]) => {
  currentTable10Row.value = row
}

// 附件模块
const tableHeader11 = ref([
  {
    label: '文件名',
    prop: 'fileName'
  },
  {
    change: true,
    type: 'function',
    width: '130',
    label: '操作',
    prop: [
      { label: '下载', bgColor: '#1C84C6' },
      { label: '删除', bgColor: '#D9534F' }
    ]
  }
])
const tableData11 = ref([])
const isLoading11 = ref(false)
const getTableList11 = async (row: any) => {
  isLoading11.value = true
  let tableDataList = (await LoginWork.post(`/board/annexList?invoiceNo=${row.invoiceNo}`)) as any
  tableData11.value = tableDataList.data
  isLoading11.value = false
}

// 检核
const checkboxChange = async (prop: any, row: any) => {
  if (prop === 'cfmFlag') {
    const res = (await LoginWork.post(
      `/board/updateCfmFlag?detailUid=${row.detailUid}&invoiceNo=${row.invoiceNo}&cfmFlag=${row.cfmFlag === true ? 'Y' : ''}`
    )) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success('操作成功')
    } else {
      JMessage.error(res.message)
    }
    getTableList()
  }
}

// 上传附件
const drawer2 = ref(false)
const download = async (row: any, item2: any) => {
  if (item2.label === '附件') {
    currentTableRow.value = row
    dialogVisible.value = true
    getTableList11(row)
  }
  if (item2.label === '其他费用') {
    formList12.value[1].inputValue = currentTableRow.value.invoiceNo
    getTableList12()
    drawer2.value = true
  }
}
const upload = async () => {
  const fileType = ['xls', 'xlsx']
  const inputFile = document.createElement('input')
  const maxFileSizeMb = 2
  const maxFilesSizeBytes = maxFileSizeMb * 1024 * 1024
  inputFile.type = 'file'
  inputFile.style.display = 'none'
  document.body.appendChild(inputFile)
  inputFile.addEventListener('change', async function () {
    const files = inputFile.files as any // 获取文件数组
    const file = files[0] // 获取第一个文件对象
    const fileExtension = file.name.split('.').pop()
    if (!fileType.includes(fileExtension as any)) {
      JMessage.warning('上传的文件格式只能是 xls, xlsx')
      document.body.removeChild(inputFile)
      return false
    }
    if (file.size > maxFilesSizeBytes) {
      JMessage.warning('文件大小不能超过2MB!!!')
      document.body.removeChild(inputFile)
      return
    }
    const formData = new FormData() as any
    formData.append('file', file) // 添加文件对象及文件名
    let result = {} as any
    console.log(currentTableRow.value)

    result = (await LoginWork.post(`/board/uploadAnnex?invoiceNo=${currentTableRow.value.invoiceNo}`, formData)) as any
    if (result.code === 200) {
      JMessage.success(result.message)
      getTableList11(currentTableRow.value)
    } else {
      JMessage.error(result.message)
    }
  })
  inputFile.click()
}
const download11 = async (row: any, item2: any) => {
  if (item2.label === '删除') {
    const res = (await LoginWork.post(`/board/deleteAnnex`, row)) as any
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList11(currentTableRow.value)
    } else {
      JMessage.error(res.message)
    }
  }
  if (item2.label === '下载') {
    const res = (await fileRequest.post(`/board/downloadAnnex`, row)) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = row.fileName
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}

const getSelectList = async () => {
  const res = (await LoginWork.post('/subcontract/static/oem/combo')) as any
  formList12.value[2].selectOptions = res.data.map((item: any) => {
    return {
      optionKey: item.vendorAbbr,
      optionValue: `${item.vendorAbbr}`,
      optionLabel: item.vendorAbbr
    }
  })
  formList12.value[5].selectOptions = res.data.map((item: any) => {
    return {
      optionKey: item.vendorAbbr,
      optionValue: `${item.vendorAbbr}`,
      optionLabel: item.vendorAbbr
    }
  })
  formList.value[1].selectOptions = res.data.map((item: any) => {
    return {
      optionKey: item.vendorAbbr,
      optionValue: `${item.vendorAbbr}  ${item.vendorNo}`,
      optionLabel: item.vendorAbbr
    }
  })
  formList.value[4].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: '',
      optionLabel: '全部'
    },
    {
      optionKey: '大货',
      optionValue: '大货',
      optionLabel: '大货'
    },
    {
      optionKey: '样品',
      optionValue: '样品',
      optionLabel: '样品'
    },
    {
      optionKey: '其他',
      optionValue: '其他',
      optionLabel: '其他'
    }
  )
  formList.value[8].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: '',
      optionLabel: '全部'
    },
    {
      optionKey: '自营出口',
      optionValue: '自营出口',
      optionLabel: '自营出口'
    },
    {
      optionKey: '代理商出口',
      optionValue: '代理商出口',
      optionLabel: '代理商出口'
    },
    {
      optionKey: '国内',
      optionValue: '国内',
      optionLabel: '国内'
    }
  )
  formList.value[12].selectOptions.push(
    {
      optionKey: '全部',
      optionValue: '',
      optionLabel: '全部'
    },
    {
      optionKey: '已检核',
      optionValue: 'Y',
      optionLabel: '已检核'
    },
    {
      optionKey: '未检核',
      optionValue: 'N',
      optionLabel: '未检核'
    }
  )
}
onMounted(() => {
  getSelectList()
})

// 其他费用模块
const formList12 = ref([
  {
    type: 'input',
    inputPlaceholder: '费用单号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '客人发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工厂',
    selectLabel: '',
    selectOptions: [] as any
  },
  {
    type: 'selectJ',
    selectValue: '',
    selectP: '供应商',
    selectLabel: '',
    selectOptions: [] as any
  },
  {
    type: 'selectJ',
    selectValue: '',
    selectP: '费用类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '责任工厂',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'checkbox',
    checkboxLabel: '未检核',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '已检核',
    checked: true
  },
  {
    type: 'dateMonth',
    dateLabel: '核销月份',
    dateValue: ''
  },
  {
    type: 'checkbox',
    checkboxLabel: '我的',
    checked: true
  },
  {
    type: 'checkbox',
    checkboxLabel: '全部',
    checked: false
  },
  {
    type: 'button',
    checkboxLabel: '导入'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])
// 表三模块
const findClicked12 = async (content: string) => {
  if (content === '置空') {
    formList12.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '导入') {
    const fileType = ['xls', 'xlsx']
    const inputFile = document.createElement('input')
    const maxFileSizeMb = 2
    const maxFilesSizeBytes = maxFileSizeMb * 1024 * 1024
    inputFile.type = 'file'
    inputFile.style.display = 'none'
    document.body.appendChild(inputFile)
    inputFile.addEventListener('change', async function () {
      const files = inputFile.files as any // 获取文件数组
      const file = files[0] // 获取第一个文件对象
      const fileExtension = file.name.split('.').pop()
      if (!fileType.includes(fileExtension as any)) {
        JMessage.warning('上传的文件格式只能是 xls, xlsx')
        document.body.removeChild(inputFile)
        return false
      }
      // if (file.size > maxFilesSizeBytes) {
      //   JMessage.warning('文件大小不能超过2MB!!!')
      //   document.body.removeChild(inputFile)
      //   return
      // }
      const formData = new FormData()
      formData.append('file', file) // 添加文件对象及文件名
      const result = (await LoginWork.post('/other/import', formData)) as any
      if (result.code === 200) {
        JMessage.success(result.message)
        getTableList12()
      } else {
        JMessage.error(result.message)
      }
    })
    inputFile.click()
  }
  if (content === '导出') {
    const res = (await fileRequest.post(`/other/downloadOtherCharges`, {
      amount: '',
      aoaMonth: formList12.value.find(
        (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '核销月份'
      )?.dateValue,
      cfmDate: '',
      cfmUser: '',
      chargesNo: formList12.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '费用单号'
      )?.inputValue,
      chargesType: formList12.value.find(
        (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '费用类型'
      )?.selectValue,
      companyId: '',
      createDate: '',
      createUser: '',
      custInvNo: formList12.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
      )?.inputValue,
      dutyAmount: '',
      dutyFactory: formList12.value.find(
        (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '责任工厂'
      )?.selectValue,
      factoryName: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')
        ?.selectValue,
      factoryNo: '',
      outNum: '',
      remark: '',
      rowId: '',
      supplierName: formList12.value.find(
        (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '供应商'
      )?.selectValue,
      supplierNo: '',
      brand: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
        ?.selectValue,
      color: formList12.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
      )?.inputValue,
      deliveryEndDate: formList12.value.find(
        (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期'
      )?.dateValue?.[1],
      deliveryStartDate: formList12.value.find(
        (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期'
      )?.dateValue?.[0],
      lotNo: formList12.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
      )?.inputValue,
      pageNum: currentPage12.value,
      pageSize: pageSize12.value,
      cfmFlag: cfmFlag12(), //
      mine: cfmFlag13()
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`utf-8''`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
}
const tableHeader12 = ref([
  {
    change: true,
    prop: 'chargesNo',
    label: '费用单号'
  },
  {
    prop: 'custInvNo',
    label: '客人票号'
  },
  {
    prop: 'outNum',
    label: '出货数量'
  },
  {
    prop: 'factoryName',
    label: '工厂'
  },
  {
    prop: 'supplierName',
    label: '供应商'
  },
  {
    prop: 'chargesType',
    label: '费用类型'
  },
  {
    prop: 'amount',
    label: '金额'
  },
  {
    prop: 'dutyFactory',
    label: '责任工厂'
  },
  {
    prop: 'dutyAmount',
    label: '责任金额'
  },
  {
    prop: 'remark',
    label: '备注'
  },
  {
    type: 'checkbox',
    prop: 'cfmFlag',
    label: '检核'
  },
  {
    change: true,
    prop: 'aoaMonth',
    label: '核销月份'
  },
  {
    change: true,
    prop: 'createUser',
    label: '操作员'
  },
  {
    change: true,
    prop: 'createDate',
    label: '操作日期'
  }
])
const tableData12 = ref([])
const imgList12 = ref([])
const isLoading12 = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData12 = ref<summaryDataType[]>([
  {
    index: 4,
    num: 0
  },
  {
    index: 7,
    num: 0
  },
  {
    index: 9,
    num: 0
  }
])
// 分页器
const currentPage12 = ref(1)
const pageSize12 = ref(40)
const total12 = ref(0)
const handleSizeChange12 = (val: number) => {
  pageSize12.value = val
  getTableList12()
}
const handleCurrentChange12 = (val: number) => {
  currentPage12.value = val
  getTableList12()
}
// 表格计算函数
const cfmFlag12 = () => {
  const Unaudited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '未检核')
  const Audited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '已检核')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return 'N'
  } else if (Audited.checked) {
    return 'Y'
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const cfmFlag13 = () => {
  const Unaudited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '我的')
  const Audited = formList12.value.find((item: any) => item.type === 'checkbox' && i18n.global.t(item.checkboxLabel) === '全部')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return '1'
  } else if (Audited.checked) {
    return ''
  } else {
    ElMessage('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
// 获取表数据
const getTableList12 = debounce(async () => {
  isLoading12.value = true
  let tableDataList = await service.post<any, any>('/other/loadInSumList', {
    amount: '',
    aoaMonth: formList12.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '核销月份'
    )?.dateValue,
    cfmDate: '',
    cfmUser: '',
    chargesNo: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '费用单号'
    )?.inputValue,
    chargesType: formList12.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '费用类型'
    )?.selectValue,
    companyId: '',
    createDate: '',
    createUser: '',
    custInvNo: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
    )?.inputValue,
    dutyAmount: '',
    dutyFactory: formList12.value.find(
      (item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '责任工厂'
    )?.selectValue,
    factoryName: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')
      ?.selectValue,
    factoryNo: '',
    outNum: '',
    remark: '',
    rowId: '',
    supplierName: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '供应商')
      ?.selectValue,
    supplierNo: '',
    brand: formList12.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '品牌')
      ?.selectValue,
    color: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    deliveryEndDate: formList12.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期'
    )?.dateValue?.[1],
    deliveryStartDate: formList12.value.find(
      (item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交期'
    )?.dateValue?.[0],
    lotNo: formList12.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入指令'
    )?.inputValue,
    pageNum: currentPage12.value,
    pageSize: pageSize12.value,
    cfmFlag: cfmFlag12(), //
    isMines: cfmFlag13()
  })
  isLoading12.value = false
  tableData12.value = tableDataList.list.map((item: any) => {
    if (item.cfmFlag === 'Y') {
      item.cfmFlag = true
    } else {
      item.cfmFlag = false
      item.addAndUpdate = true
    }
    item.change = 'Y'
    return item
  })
  total12.value = tableDataList.total
  // currentRow12()
  summaryData12.value[0].num = tableDataList.summaryRoot.outNum
  summaryData12.value[1].num = tableDataList.summaryRoot.amount
  summaryData12.value[2].num = tableDataList.summaryRoot.dutyAmount
}, 500)
onMounted(() => {
  getTableList12()
})
watch(
  () =>
    formList12.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList12()
  }
)
const selectedLists12 = ref([]) as any
const selectTableList12 = (selectedList: any) => {
  selectedLists12.value = selectedList
}
const currentTableRow12 = ref({}) as any
const currentRow12 = async (row: any = tableData12.value[0]) => {
  currentTableRow12.value = row
}
const checkboxChange12 = (prop: any, row: any) => {
  ElMessageBox.confirm('是否确认？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    row.cfmFlag === true ? (row.cfmFlag = 'Y') : (row.cfmFlag = '')
    const res = (await LoginWork.post('/other/updateOtherCfmFlag', row)) as any
    if (res.code === 200) {
      JMessage.success('成功')
      getTableList12()
      return
    }
  })
}
const confirmChange12 = async (row: any) => {
  const res = (await LoginWork.post(`/other/updateDutyAmount`, row)) as any
  if (res.code === 200) {
    JMessage.success('成功')
    getTableList12()
  } else {
    JMessage.error(res.message)
  }
}
const Save = async (arr: any, deleteArr: any) => {
  const res = (await LoginWork.post(`/other/add`, arr)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    deleteArr()
    JMessage.success(res.message)
    getTableList12()
  } else {
    JMessage.error(res.message)
  }
}
const remove = async () => {
  const res = (await LoginWork.post(`/other/delete`, selectedLists12.value)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList12()
  } else {
    JMessage.error(res.message)
  }
}
const month = ref()
const insetMonth = async () => {
  const res = (await LoginWork.post(`/other/update/aoaMonth?aoaMonth=${month.value}`, selectedLists12.value)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList12()
  } else {
    JMessage.error(res.message)
  }
}
const cfmFlagChange = async () => {
  const res = (await LoginWork.post(`/other/updateOtherCfmFlag`, currentTableRow12.value)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList12()
  } else {
    JMessage.error(res.message)
  }
}

// 下拉框请求数据
const getSelectList2 = async () => {
  await selectSomeList(formList2, () => service.get('/back/getVendorCompanyName'))
  const res = await LoginWork.post(`/other/list/combo?pageSize=${99999}&pageNum=${1}`)
  res.data.data.forEach((item: any) => {
    formList12.value[3].selectOptions?.push({
      value: item.vendorAbbr,
      label: `${item.vendorAbbr}  ${item.vendorNo}`
    })
  })
  const res2 = await LoginWork.post(`/other/dicType/list?pageSize=${99999}&pageNum=${1}`)
  res2.data.data.forEach((item: any) => {
    formList12.value[4].selectOptions?.push({
      value: item.dictValue,
      label: `${item.dictValue}`
    })
  })
}
onMounted(() => {
  getSelectList2()
})

// 添加数据Dialog
const tableHeader13 = ref([
  {
    prop: 'orderType',
    label: '类型'
  },
  {
    prop: 'custInvNo',
    label: '客人发票号'
  },
  {
    type: 'dateSingle',
    prop: 'shipDate',
    label: '日期'
  },
  {
    prop: 'payDays',
    label: '账期'
  },
  {
    prop: 'arType',
    label: '收款类型'
  },
  {
    prop: 'arAmt',
    label: '应收金额'
  },
  {
    prop: 'remark',
    label: '备注'
  }
])
const tableData13 = ref([]) as any
const isLoading13 = ref(true)
const AddHandle13 = (obj: any) => {
  obj.orderType = '其他'
}
const Save13 = async (arr: any) => {
  const res = (await LoginWork.post(
    '/board/otherSaveData',
    arr.map((item: any) => {
      item.invoiceNo = currentTableRow.value.invoiceNo
      return item
    })
  )) as any
  if (res.code === 200) {
    JMessage.success('保存成功')
    drawer3.value = false
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}

const drawer4 = ref(false)
const tableHeader14 = ref([
  {
    width: '120',
    prop: 'customsInvNo',
    label: '报关发票号'
  },
  {
    width: '120',
    prop: 'custInvNo',
    label: '客人发票号'
  },
  {
    prop: 'premium',
    label: '添加港口单价'
  },
  {
    prop: 'destPort',
    label: '起运港-目的港'
  },
  {
    type: 'select',
    prop: 'exportType',
    label: '出口类型',
    options: [
      {
        value: '自营出口',
        label: '自营出口'
      },
      {
        value: '代理商出口',
        label: '代理商出口'
      },
      {
        value: '国内',
        label: '国内'
      }
    ]
  },
  {
    type: 'dateSingle',
    prop: 'shipDate',
    label: '船期'
  }
])
const tableData14 = ref([
  {
    change: true,
    disableConfirm: true,
    addAndUpdate: true
  }
]) as any
const addOne = async () => {
  drawer4.value = true
  const res = (await LoginWork.post(`/board/queryBoard`, {
    invoiceNo: currentTableRow.value.invoiceNo
  })) as any
  if (res.code === 200) {
    tableData15.value = res.data.list.map((item: any) => {
      item.change = true
      item.disableConfirm = true
      item.addAndUpdate = true
      return item
    })
  }
  tableData14.value[0] = {
    ...currentTableRow.value,
    addAndUpdate: true,
    change: true,
    disableConfirm: true
  }
}
const confirmAdd = async () => {
  if (tableData14.value.payDays === null) {
    JMessage.warning('请输入账期')
    return
  }
  const arr = [] as any
  tableData15.value.forEach((item: any) => {
    arr.push({
      ...tableData14.value[0],
      payDays: item.payDays, // 账期
      arType: item.arType, // 收款类型
      arAmt: item.arAmt, // 收款金额
      additionalCost: item.additionalCost, // 附加费用
      outAmt: item.outAmt, // 出货金额
      remark: item.remark, // 备注
      premium: tableData14.value[0].premium, // 添加港口单价
      // custInvNo: currentTableRow.value.custInvNo, // 客人发票号
      companyId: currentTableRow.value.companyId // 公司ID
    })
  })
  const res = (await LoginWork.post(`/board/editBoardSaveData`, arr)) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success(res.message)
    drawer4.value = false
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}

const addOne2 = () => {
  tableData15.value.push({
    payDays: '',
    arType: '',
    arAmt: '',
    additionalCost: '',
    outAmt: currentTableRow.value.outAmt,
    remark: '',
    change: true,
    disableConfirm: true,
    addAndUpdate: true
  })
}
const currentTableRow15 = ref({}) as any
const currentRow15 = (row: any) => {
  currentTableRow15.value = row
}
const removeOne2 = () => {
  // 查找当前行的索引
  const index = tableData15.value.findIndex((item: any) => currentTableRow15.value === item)
  tableData15.value.splice(index, 1)
}

const tableHeader15 = ref([
  {
    prop: 'payDays',
    label: '账期'
  },
  {
    width: '70',
    type: 'select',
    prop: 'arType',
    label: '收款类型',
    options: [
      {
        value: 'LC',
        label: 'LC'
      },
      {
        value: 'TT',
        label: 'TT'
      }
    ]
  },
  {
    prop: 'arAmt',
    label: '收款金额'
  },
  {
    prop: 'additionalCost',
    label: '附加费用'
  },
  {
    change: true,
    prop: 'outAmt',
    label: '出货金额'
  },
  {
    prop: 'remark',
    label: '备注'
  }
])
const tableData15 = ref([
  {
    change: true,
    disableConfirm: true,
    addAndUpdate: true
  }
]) as any

const JDialogTableHeader = ref([
  {
    width: '120',
    prop: 'customsInvNo',
    label: '报关发票号'
  },
  {
    width: '120',
    prop: 'custInvNo',
    label: '客人发票号'
  },
  {
    prop: 'premium',
    label: '添加港口单价'
  },
  {
    prop: 'destPort',
    label: '起运港-目的港'
  },
  {
    type: 'selectJ',
    prop: 'exportType',
    label: '出口类型',
    options: [
      {
        value: '自营出口',
        label: '自营出口'
      },
      {
        value: '代理商出口',
        label: '代理商出口'
      },
      {
        value: '国内',
        label: '国内'
      }
    ]
  },
  {
    type: 'dateSingle2',
    prop: 'shipDate',
    label: '船期'
  },
  {
    prop: 'payDays',
    label: '账期'
  },
  {
    width: '70',
    type: 'selectJ',
    prop: 'arType',
    label: '收款类型',
    options: [
      {
        value: 'LC',
        label: 'LC'
      },
      {
        value: 'TT',
        label: 'TT'
      }
    ]
  },
  {
    prop: 'arAmt',
    label: '收款金额'
  },
  {
    prop: 'additionalCost',
    label: '附加费用'
  },
  {
    change: true,
    prop: 'outAmt',
    label: '出货金额'
  },
  {
    prop: 'remark',
    label: '备注'
  }
])
// 删除
const removeOne = async () => {
  // 向服务器发送请求，更新外派单信息
  const res = (await LoginWork.post(`/board/delete`, {
    ...currentTableRow.value,
    cfmFlag: currentTableRow.value.cfmFlag === true ? 'Y' : ''
  })) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
</script>

<!-- 复制的AppMain.vue样式 -->
<style lang="less" scoped>
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.button-group {
  display: flex;
  align-items: center;
  margin-left: -50px;
}

.tablet-margin {
  margin-left: 10px;
  /* Add left margin for buttons on tablet */
}

@media screen and (max-width: 768px) {
  .header-container {
    flex-direction: column;
    /* Stack elements vertically on mobile */
    align-items: flex-start;
    /* Align items to the left on mobile */
  }

  .button-group {
    margin-top: 10px;
    /* Add top margin for button group on mobile */
    margin-left: 1px;
    display: flex;
    flex-wrap: wrap;
  }

  .demo-datetime-picker {
    margin-top: 10px;
    margin-left: 2px !important;
  }

  .tablet-margin {
    margin-left: 0;
    /* Remove left margin on mobile and tablet */
    margin-top: 5px;
    /* Add top margin for buttons on mobile */
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .button-group {
    margin-top: 10px;
    /* Add top margin for button group on mobile */
    margin-left: 1px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .tablet-margin {
    margin-top: 10px;
  }

  .demo-datetime-picker {
    margin-top: 10px;
    margin-left: 2px !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1180px) {
  .button-group {
    margin-top: 10px;
    /* Add top margin for button group on mobile */
    margin-left: 1px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .tablet-margin {
    margin-top: 10px;
  }

  .demo-datetime-picker {
    margin-top: 10px;
    margin-left: 2px !important;
  }
}

.card-container {
  display: flex;
}

.card-item {
  width: 25%;
  /* Three cards per row, accounting for margins */
  margin: 0 5px 10px;
  /* Add margin to all sides of the card */
  box-sizing: border-box;
  /* Include padding and border in the width */
}

.item {
  width: 100%;
  /* Three cards per row, accounting for margins */
  margin: 0 5px 10px;
  /* Add margin to all sides of the card */
  box-sizing: border-box;
  /* Include padding and border in the width */
  height: 513px;
}

.carditem {
  width: 33.33%;
  /* Three cards per row, accounting for margins */
  margin: 0 5px 10px;
  /* Add margin to all sides of the card */
  box-sizing: border-box;
  /* Include padding and border in the width */
}

@media screen and (max-width: 1024px) {
  .card-container {
    display: flex;
    flex-wrap: wrap !important;
  }

  .card-item {
    width: 100%;
    /* Two cards per row on tablet */
  }

  .item {
    width: 100%;
    /* Two cards per row on tablet */
  }

  .carditem {
    width: 100%;
    /* Two cards per row on tablet */
  }
}

@media screen and (max-width: 768px) {
  .card-container {
    display: flex;
    flex-wrap: wrap !important;
  }

  .card-item {
    width: 100%;
    /* One card per row on mobile */
  }

  .item {
    width: 100%;
    /* Two cards per row on tablet */
  }

  .carditem {
    width: 100%;
    /* Two cards per row on tablet */
  }
}

.active {
  background-color: #0058ff;
  color: white;
}

:deep(.el-button) {
  border: none;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.home {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* background-color: #ddd; */
  img {
    width: 370px;
    height: 82px;
  }

  .title {
    font-size: 72px;
    margin-top: 41px;
    font-family: Segoe UI-Semibold, Segoe UI;
    font-weight: 600;
    color: #0e0d22;
  }

  button {
    width: 258px;
    height: 46px;
    background: #f89027;
    border: 0;
    border-radius: 3px 3px 3px 3px;
    opacity: 1;
    margin-top: 62px;
    color: white;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
  }

  p {
    font-size: 14px;
    font-family: PingFangSC-Regular-, PingFangSC-Regular;
    color: #989898;
    margin-top: 20px;
  }
}

.app-main {
  /*50 = navbar  */
  padding: 24px;
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.fixed-header + .app-main {
  padding-top: 107px;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
<style lang="less" scoped></style>
